<template>
	<view class="toast_mode">
		<view class="alert_content">
			<view class="del" @click="cancel">
				<image src="../../../static/delete.png" mode="aspectFill"></image>
			</view>
			<view class="alert_top_title">
				申请团长
			</view>
			<view class="alert_center">
				
				<view class="alert_center_address" @click="openMap">
					<image class="alert_center_address_position" src="../../../static/position.png" mode="aspectFill"></image>
					<text class="alert_center_address_text">{{lat_lon}}</text>
					<view class="alert_center_address_btn">地图选址</view>
				</view>
				<view class="alert_center_shopname" style="margin-top: 28rpx;">
					<text class="alert_center_shopname_title">详细地址:</text>
					<input type="text" class="alert_center_shopname_input" v-model="dizhi" placeholder="请输入具体地址">
				</view>
				<view class="alert_center_shopname" style="margin-top: 28rpx;">
					<text class="alert_center_shopname_title">电话:</text>
					<input type="number" class="alert_center_shopname_input" v-model="phone" placeholder="请输入联系电话">
				</view>
			
			</view>
			<view class="alert_btn" @click="submit">成为团长</view>
		</view>
		
	</view>
</template>

<script>
	import base from '../../../api/base'
	export default {
		data() {
			return {
				store_name:'',
				dizhi:'',
				phone:'',
				lat_lon:'获取店铺大概地址',
				latitude:'',
				lontitude:'',
				showProgress:false,
				progress:0,//上传进度
				fileName:'',
				fileNameSrc:'../../../static/photo.png'//展示的图片
			}
		},
		methods: {
			cancel(){
				this.$emit('cancelAddShop')
			},
			submit(){
				let that = this
				if(that.dizhi == ''){
					that.$commonJs.showToast.showNoneToast('请输入具体地址')
					return false
				}else if(that.phone == ''){
					that.$commonJs.showToast.showNoneToast('请输入联系电话')
					return false
				}
				uni.getStorage({
					key:"shopId",
					success(e) {
						console.log(65,e.data)
						let postData={
							shopAddress:that.dizhi,phone:that.phone,id:e.data
						}
						that.$api.adminStore.tuanzhang(postData)
							.then(res => {
								if (res.code == 200) {					
									console.log(res.data)
									that.$commonJs.showToast.showNoneToast(res.msg)
									uni.navigateBack({
										delta:1
									})
									
								} else {
									that.$commonJs.showToast.showNoneToast(res.err)
									uni.navigateBack({
										delta:1
									})
								}
							})
							.catch(err => {
								that.$commonJs.showToast.showNoneToast(err)
								uni.navigateBack({
									delta:1
								})
							})
					}
				})
				// this.$emit('submitAddShop',{store_name:this.store_name,latitude:this.latitude,lontitude:this.lontitude,shop_src:this.fileName,show_src:this.fileNameSrc,dizhi:this.dizhi,phone:this.phone})
				// let postData={
				// 	shopAddress:this.dizhi,phone:this.phone
				// }
				// this.$api.adminStore.tuanzhang(postData)
				// 	.then(res => {
				// 		if (res.code == 200) {					
				// 			console.log(res.data)
				// 			this.$commonJs.showToast.showNoneToast(res.msg)
							
				// 		} else {
				// 			this.$commonJs.showToast.showNoneToast(res.err)
				// 		}
				// 	})
				// 	.catch(err => {
				// 		this.$commonJs.showToast.showNoneToast(err)
				// 	})
			},
			openMap(){
				let that = this
				uni.getLocation({
					type: 'wgs84',
					geocode:true,//设置该参数为true可直接获取经纬度及城市信息
					success: function (res) {
						console.log(92,res)
						
						uni.chooseLocation({
						  latitude: res.latitude || '', /* 纬度 */
						  longitude: res.longitude || '', /* 经度 */
						  success: (res) => {
							  console.log(96,res)
							    that.dizhi = res.address
								that.lat_lon = res.latitude + ',' + res.longitude
								that.latitude = res.latitude
								that.lontitude = res.longitude
						  },
						  fail: function (err) {
						      console.log('取消按钮', err)
						  }
						})
					},
					fail: function () {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon:'none'
						});
					}
				});
			},
			uploadStoreImg(){
				let that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        const uploadTask = uni.uploadFile({
				            url: base.upload_store_add_url, //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
							header:{
								'Authorization':uni.getStorageSync('adminToken')
							},
				            name: 'file',
				            success: (uploadFileRes) => {
								that.showProgress = false
								that.progress = 0
								let data = JSON.parse(uploadFileRes.data)
								if(data.code == 200){
									this.$commonJs.showToast.showNoneToast(data.msg)
									that.fileName = data.fileName
									that.fileNameSrc = base.common_url + data.fileName
								}else{
									this.$commonJs.showToast.showNoneToast(data.msg)
								}
				            },
							fail:(err)=>{
								this.$commonJs.showToast.showNoneToast(err)
								console.log(err)
							}
				        });
				
				        uploadTask.onProgressUpdate((res) => {
				            that.showProgress = true
							that.progress = res.progress
				        });
				    }
				});
			}
		}
	}
</script>

<style>
	.progress{
		position: fixed;
		top: 50%;
		width: 680rpx;
		z-index: 99999999;
		width: 680rpx;
		background-color: #4D84FE;
		height: 50px;
		margin-left: 35rpx;
		border-radius: 12px;
	}
	.progress .progress_text{
		color: #ffffff;
		padding: 3px;
		text-align: center;
	}
	
	.toast_mode{
		background-color: rgba(0,0,0,0.6);
		position: fixed;
		width: 750rpx;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 999999;
	}
	.alert_content{
		width: 600rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		z-index: 1000000;
		position: absolute;
		top: 308rpx;
		left: 76rpx;
	}
	.del{
		width: 600rpx;
		float: right;
	}
	.del image{
		width: 22rpx;
		height: 22rpx;
		margin: 28rpx 28rpx 0 0;
		float: right;
	}
	.alert_top_title{
		width: 600rpx;
		height: 50rpx;
		line-height: 50rpx;
		float: left;
		text-align: center;
		font-size: 36rpx;
		color: #191B1E;
		font-weight: 700;
	}
	.alert_center{
		width: 510rpx;
		height: auto;
		margin: 20rpx 0 0 46rpx;
		float: left;
	}
	.alert_center_shopname{
		width: 510rpx;
		height: 80rpx;
		border-radius: 46rpx;
		float: left;
		background-color: #F0F0F0;
		border-radius: 46rpx;
	}
	.alert_center_shopname .alert_center_shopname_title{
		width: 112rpx;
		height: 80rpx;
		float: left;
		display: block;
		color: #191B1E;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 80rpx;
		margin-left: 30rpx;
	}
	.alert_center_shopname .alert_center_shopname_input{
		width: 328rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: right;
		float: left;
		margin-right: 30rpx;
		margin-left: 10rpx;
	}
	.alert_center_address{
		width: 510rpx;
		height: 80rpx;
		float: left;
		background-color: #F0F0F0;
		border-radius: 46rpx;
		margin-top: 28rpx;
	}
	.alert_center_address .alert_center_address_position{
		width: 28rpx;
		height: 32rpx;
		margin: 24rpx 0 0 32rpx;
		float: left;
	}
	.alert_center_address .alert_center_address_text{
		height: 80rpx;
		width: 264rpx;
		margin: 0 4rpx 0 4rpx;
		float: left;
		color: #999999;
		font-size: 28rpx;
		text-align: left;
		line-height: 80rpx;
	}
	.alert_center_address .alert_center_address_btn{
		width: 168rpx;
		height: 80rpx;
		float: right;
		background-image: linear-gradient(#6B96FE,#4D84FE);
		border-radius: 46rpx;
		color: #F9F9F9;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
	}
	.alert_center_img{
		float: left;
		margin-top: 24rpx;
	}
	.alert_center_img .alert_center_img_title{

		color: #191B1E;
		font-size: 28rpx;
		font-weight: 700;
		margin-left: 30rpx;
	}
	.alert_center_img  .alert_center_img_upload{
		width: 510rpx;
		float: left;
		position: relative;
	}
	.alert_center_img image{
		width: 132rpx;
		height: 132rpx;
		float: left;
		margin: 20rpx 0 0 30rpx;
	}
	.alert_center_img .alert_center_img_upload_title{
		position: absolute;
		top: 94rpx;
		left: 60rpx;
		color: #999999;
		font-size: 20rpx;
	}
	.alert_btn{
		width: 510rpx;
		height: 92rpx;
		background-image:linear-gradient(#6B96FE,#4D84FE);
		color: #F9F9F9;
		font-size: 28rpx;
		line-height: 92rpx;
		text-align: center;
		margin: 36rpx 0 36rpx 46rpx;
		float: left;
		border-radius: 46rpx;
	}
</style>
